<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">

<link rel="import" href="../app-form/app-form.html">

<dom-module id="members-add">
    <template>
        <style include="shared-styles forms single-page">
        #content {
            max-width: 900px;
        }

        paper-material {
            display: block;
            padding: 24px;
        }

        paper-progress {
            position: absolute;
            bottom: 85px;
            width: 100%;
            left: 0;
            right: 0;
        }

        :host>::slotted(paper-input-container) {
            padding-top: 16px;
            padding-bottom: 16px;
        }
        .single-head {
            @apply --team-page-head-mixin
        }
        </style>
        <div id="content">
            <paper-material class="single-head layout horizontal">
                <span class="icon"><iron-icon icon="[[section.icon]]"></iron-icon></span>
                <div class="title flex">
                    <h2>
                        Add Members in [[team.name]]
                    </h2>
                    <div class="subtitle">
                        You can send multiple invitations in one go.
                    </div>
                </div>
            </paper-material>
            <paper-material>
                <app-form fields="[[fields]]" url="/api/v1/org/[[model.org.id]]/teams/[[team.id]]/members" method="POST" on-request="_addMembersRequest" on-response="_addMembersResponse"></app-form>
            </paper-material>
        </div>
    </template>
    <script>
    (function() {
        'use strict';

        Polymer({
            is: 'members-add',

            properties: {
                section: {
                    type: Object
                },
                model: {
                    type: Object
                },
                params: {
                    type: Object
                },
                team: {
                    type: Object,
                    computed: '_computeTeam(params, model.teamsArray.*)'
                },
                fields: {
                    type: Array,
                    value: [{
                        name: "emails",
                        label: "Emails *",
                        type: "textarea",
                        value: "",
                        helptext: "Fill in the members' emails you want to invite, one per line",
                        defaultValue: "",
                        placeholder: "",
                        errorMessage: "Please enter the users emails",
                        show: true,
                        required: true
                    }]
                }
            },
            listeners: {

            },
            ready: function() {

            },
            _computeTeam: function(params, teamsArray) {
                if (params) {
                    var team = this.model.teamsArray.find(function(t) {
                        return t.id == params.team
                    });
                    if (team) {
                        return team;
                    } else {
                        return {
                            name: "team not found"
                        };
                    }
                }
            },
            _addMembersRequest: function() {
                this.set('sendingData', true);
            },
            _addMembersResponse: function(e) {
                this.dispatchEvent(new CustomEvent('go-to', { bubbles: true, composed: true, detail: { url: '/teams/' + this.team.id } }));

                this.set('sendingData', false);
            }
        });
    })();
    </script>
</dom-module>